<template>
  <div>
    <el-header class="classheader" v-if="windows === 0">
      <span>删除专业</span>
    </el-header>

    <van-list>
      <van-collapse v-model="activeName" accordion>
        <el-button type="danger" class="add-btn" @click.prevent="del()">
          删除专业
        </el-button>
        <div v-for="(user, userIndex) in option2" :key="userIndex">
          <van-cell
            clickable
            :key="userIndex"
            :title="user.text"
            @click="toggleCheckbox(user.id)"
          >
            <template #right-icon>
              <input
                type="checkbox"
                :id="'user_' + user.id"
                v-model="selectedIds"
                :value="user.id"
                @click.stop
              />
            </template>
          </van-cell>
        </div>
      </van-collapse>
    </van-list>
  </div>
</template>
  
<script>
import axios from "axios";
export default {
  data() {
    return {
      windows: 0,
      loading: false,
      finished: false,
      activeName: null,
      option2: [],
      selectedIds: [],
    };
  },
  mounted() {
    axios.post("/class/selectMajors").then((response) => {
      console.log(111);
      console.log(response);
      response.data.data.forEach((item) => {
        this.option2.push({
          text: item.major_name,
          id: item.major_id,
        });
      });
      // this.datas = response.data.data;
    });
  },
  methods: {
    onLoad() {
      // 加载更多数据的逻辑
    },
    toggleCheckbox(id) {
      const index = this.selectedIds.indexOf(id);
      if (index === -1) {
        this.selectedIds.push(id);
      } else {
        this.selectedIds.splice(index, 1);
      }
    },
    del() {
      // 删除专业的逻辑
      console.log("删除专业", this.selectedIds);
      axios
        .post("/class/deleteMajor", this.selectedIds)
        .then((response) => {
          console.log(response.data);
          if (response.data.success) {
            alert("删除成功");
          } else {
            alert("删除成功！");
          }
        })
        .catch((error) => {
          console.error(error);
          alert("请求失败");
        });
    },
  },
};
</script>

  
  <style scoped>
.classheader {
  background-color: #424242;
}
.classheader span {
  /* height: 60px;
    width: 300px;
    background-color: #f42525; */
  color: #fff;
  font-size: 20px;
  text-align: center;
  line-height: 60px;
}
</style>